import { ElButton, ElContainer, ElScrollbar } from "element-plus";
import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref } from "vue";
import "./index.less";
import { useAuthStore } from "@/stores/modules/auth";
import c from './layout.module.less'
import { useRouter } from "vue-router";
import * as echarts from "echarts";

import Child from './child'
export default defineComponent({
  name: "layout",
  setup() {
    const authStore = useAuthStore();
    const router = useRouter();
    const menuList = computed(() => authStore.authMenuListGet);
    const isShow = ref(false)
    let chartInstance: any = null;
    const chartDom = ref(null);
    const changes = () => {
      isShow.value = !isShow.value
    }
    // 绘制折线图
    const drawLineChart = () => {
      chartInstance = echarts.init(chartDom.value);
      const option = {
        // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
        title: {
          text: "第一个数据"
        },
        tooltip: {},
        xAxis: {
          data: ["类别1", "类别2", "类别3", "类别4", "类别5"]
        },
        yAxis: {},
        series: [
          {
            name: "数据系列",
            type: "line", // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
            data: [120, 200, 150, 80, 70]
          }
        ]
      };
      chartInstance.setOption(option);
    };
    const resizeHandler = () => {
      if (chartInstance) {
        console.log('chance');
        chartInstance.resize();
      }
    };


    const changeMenu = (item: any) => {
      router.push(item.path);
    }
    onMounted(() => {
      drawLineChart()
      window.addEventListener('resize', resizeHandler);

    })

    const changeMain = () => {
      console.log('123');
      router.push('/main');
    }

    onUnmounted(() => {
      if (chartInstance != null && chartInstance.dispose) {
        chartInstance.dispose();
      }
      window.removeEventListener('resize', resizeHandler);
    })
    return () => {
      return (
        <div>
          <div class={c.scro}>
            <ElScrollbar>
              <div class={c.box}>532</div>
              <div class={c.box}>532</div>
              <div class={c.box}>532</div>
              <div class={c.box}>532</div>
            </ElScrollbar>
          </div>

          <ElButton type='primary' onClick={changes}>按钮</ElButton>

          {isShow.value && <Child />}

          <div class={c.domOne} ref={chartDom}></div>

          <ElButton type='primary' onClick={changeMain}>跳转</ElButton>


          {menuList.value && menuList.value.map((item: any) => (
            <div onClick={() => changeMenu(item)}>{item.meta.title}</div>
          ))}
        </div>
      );
    };
  },
});
